<template>
  <div class="calendarSelect" :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }">
    <div class="select_content">
      <!-- 日期选择器 -->
      <el-date-picker
        v-model="date"
        :class="{ disableClass: disabled }"
        type="date"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :editable="false"
        :clearable="false"
        :picker-options="pickerOptions"
        :disabled="disabled"
        @change="changeData"
      />

      <!-- 日期显示区域 -->
      <div class="date">
        <div v-if="date">{{ date }}</div>
        <div v-else>--</div>
        <div><slot>日期选择</slot></div>
      </div>

      <!-- 清除按钮 -->
      <div class="del">
        <i v-if="!disabled" class="el-icon-close" @click="clearDate"></i>
      </div>
    </div>
  </div>
</template>

<script setup name="CalendarSelect" lang="ts">
import { ref, watch, computed } from 'vue';
import { ElDatePicker } from 'element-plus';

const props = defineProps({
  value: String,
  startDate: String, // 控制结束时间选择时，不能选择开始之前的时间
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:value', 'change']);

// 选中的日期
const date = ref(props.value || null);

// 日期选择器的禁用选项
const pickerOptions = computed(() => ({
  disabledDate: (time) => time.getTime() < Date.parse(props.startDate)
}));

// 清空日期
const clearDate = () => {
  if (date.value) {
    date.value = null;
    emit('update:value', date.value);
    emit('change', date.value);
  }
};

// 日期变化事件
const changeData = (value) => {
  emit('update:value', value);
  emit('change', value);
};

// 监听 props.value 变化并更新本地的 date
watch(
  () => props.value,
  (newValue) => {
    date.value = newValue;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.calendarSelect {
  user-select: none;
  cursor: pointer;
  height: 50px;
  display: flex;
  align-items: center;

  .select_content {
    display: flex;
    height: 35px;
    align-items: center;

    .el-icon-date {
      font-size: 15px;
      color: #aaa;
      width: 35px;
      line-height: 35px;
    }

    .date {
      height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-right: 10px;
      color: #999;

      div {
        &:first-of-type {
          font-size: 16px;
        }

        &:last-of-type {
          font-size: 12px;
        }
      }
    }

    .el-date-editor {
      width: 35px;
      height: 35px;
      border: 1px solid #aaa;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;

      &.disableClass {
        background: #f5f5f5;
        border-color: #f5f5f5;
      }

      &:hover {
        border: 1px solid rgb(29, 167, 106);
      }
    }

    .del {
      width: 20px;
      height: 100%;
      display: flex;
      align-items: center;

      .el-icon-close {
        visibility: hidden;
      }

      &:hover .el-icon-close {
        visibility: visible;
        color: red;
      }
    }
  }
}
</style>
